Swiper 轮播

基础用法

class Swiper extends StatefulWidget {
  _Swiper createState() => new _Swiper();
}

class _Swiper extends State<Swiper> {
  List<Widget> pageList = [
    Container(
      color: Color(0xff99a9bf),
      child: Text(
        '1',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      alignment: Alignment.center,
    ),
    Container(
      alignment: Alignment.center,
      color: Color(0xffd3dce6),
      child: Text(
        '2',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    ),
    Container(
      color: Color(0xff99a9bf),
      alignment: Alignment.center,
      child: Text(
        '3',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('swipe'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Container(
          height: 200,
          padding: EdgeInsets.all(15),
          child: MillSwipe(
            autoPlay: true,
            pageList: pageList,
          ),
        ),
      ),
    );
  }
}

设置样式

可以通过 type 字段设置样式。 MillSwipeType.scaleCard：缩放卡片样式。MillSwipeType.card 普通卡片样式。MillSwipeType.normal 默认样式。

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('swipe'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Container(
          height: 200,
          padding: EdgeInsets.all(15),
          child: MillSwipe(
            autoPlay: true,
            pageList: pageList,
          ),
        ),
      ),
    );
  }
}

设置方向

direction: Axis.vertical 和 Axis.horizontal。

 MillSwipe(
   type: MillSwipeType.scaleCard,
   viewportFraction: 0.88,
   autoPlay: true,
   pageList: pageList,
   direction: Axis.vertical,
 );

使用控制器

class Swiper extends StatefulWidget {
  _Swiper createState() => new _Swiper();
}

class _Swiper extends State<Swiper> {
  MillSwiperController _swiperController = MillSwiperController(true); //true: 自动播放
  @override
  void initState() {
    super.initState();
    _swiperController.addListener(() {
      switch (_swiperController.event) {
        case MillSwiperController.NEXT:
         	// 下一步触发
          break;
        case MillSwiperController.PREVIOUS:
          // 上一步 触发。
          break;
        case MillSwiperController.SKIP:
          // 跳到具体某页触发
          break;
      }
    });
  }
  List<Widget> pageList = [
    Container(
      color: Color(0xff99a9bf),
      child: Text(
        '1',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      alignment: Alignment.center,
    ),
    Container(
      alignment: Alignment.center,
      color: Color(0xffd3dce6),
      child: Text(
        '2',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    ),
    Container(
      color: Color(0xff99a9bf),
      alignment: Alignment.center,
      child: Text(
        '3',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('swipe'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Container(
          height: 200,
          padding: EdgeInsets.all(15),
          child: MillSwipe(
            controller: _swiperController
            autoPlay: true,
            pageList: pageList,
          ),
        ),
      ),
    );
  }
}

Attributes

字段名称	说明	类型	默认值
controller
delay	延迟时间	int	3000
pageList	卡片的列表	List	[]
indicatorColor	指示器默认颜色	Color	Color(0xffc3c3c3)
indicatorActiveColor	指示器激活时颜色	Color	Color(0xff409eff)
indicatorSize	指示器尺寸	double	14
indicatorSpace	指示器间隔	double	4
type	轮播图类型	MillSwipeType	MillSwipeType.noraml
viewportFraction	展示卡片的比例	double	1
space	卡片模式时间隔	double	5.0
direction	方向	Axios	Axios.horizontal
autoPlay	自动播放	bool	false
height	仅当type = scaleCard 时有用。	double	130
width	仅当type = scaleCard 时有用。	double	350